<template>
	<view class="container">
		<map id="myMap" :latitude="latitude" :longitude="longitude" :markers="covers" show-location
			@updated="lodingmap">
			<view class="tobus">
				<image @click="todz" class="dz" src="../../static/map-icon/dz.png"></image>
				<image @click="tokf" class="kf" src="../../static/map-icon/kf.png" mode=""></image>
				<image @click="todq" class="dq" src="../../static/map-icon/dq.png" v-model="wq"></image>
				<image @click="loding" class="dw" src="../../static/map-icon/dw.png" mode=""></image>
			</view>
			<!-- <uni-easyinput v-if="wq" class="uni-mt-5" suffixIcon="search" v-model="keyword" placeholder="右侧图标" @iconClick="iconClick"></uni-easyinput> -->
		</map>
		<button type="default" class="tobus_box1" @click="todw">
			门店
		</button>
		<button class="tobus_box2" @click="tobus">
			<image src="../../static/border/sao.png" class="img-s"></image>
			扫一扫
		</button>
		<button class="tobus_box3" @click="touser">
			用户
		</button>
	</view>
</template>

<script>
	import {
		getToken
	} from '../../utils/auth.js';
	export default {
		data() {
			return {
				id: "",
				// 经纬度是自己的
				latitude: 0,
				longitude: 0,
				// 经纬度是店铺位置
				covers: [{
					id: 1,
					width: 30,
					height: 30,
					iconPath: '../../static/map-icon/cdb.png',
					latitude: 0,
					longitude: 0,
					callout: {
						display: 'BYCLICK'
					}
				}],
				// 1是开启导航 0是不开启
				num: 1,
				// 标记点的地址
				city: '四川省成都市双流区新裕路与锦和路十字路口',
				flag: false,
				wq: false,
				key: '5N6BZ-TPDKD-Q4N4L-POWXS-GQ5XK-FSBQG',
			}
		},
		// 页面初次渲染完成
		onReady() {
			// 获得地图实例,绑定到id叫map上面
			this.mapContext = wx.createMapContext('myMap')
			this.mapContext.moveToLocation()
		},
		onLoad() {
			// 这两个是标记点坐标
			uni.request({
				url: 'https://apis.map.qq.com/ws/geocoder/v1/?address=' + this.city + '&key=' + this.key,
				success: res => {
					this.covers[0].latitude = res.data.result.location.lat
					this.covers[0].longitude = res.data.result.location.lng
					// console.log(this.lat)
					// console.log(this.lng)
				}
			})
			// console.log(option);
			// // 把标记坐标转换成地址（逆解析）
			// uni.request({
			// 	// 此处的key需要填写
			// 	url: 'https://apis.map.qq.com/ws/geocoder/v1/?location=' +
			// 		this.covers[0].latitude + ',' + this.covers[0].longitude +
			// 		'&key=' + this.key + '&get_poi=1',
			// 	success: res => {
			// 		this.city = res.data.result.formatted_addresses.recommend
			// 		console.log(res);
			// 	}
			// })
			// 进入地图页面后获得自己坐标
			uni.getLocation({
				type: 'gcj02',
				success: res => {
					// 获取坐标后存起来
					this.latitude = res.latitude
					this.longitude = res.longitude
					// console.log('当前位置的经度：' + this.latitude);
					// console.log('当前位置的纬度：' + this.longitude);
					// 使用地图实例中的办法,让标记和我的位置都在可视区域中显示
					this.mapContext.includePoints({
						padding: [140, 50, 140, 50],
						points: [
							// 第一个是我的位置 数据
							{
								latitude: this.latitude,
								longitude: this.longitude
							},
							// 第二个是店铺位置数据
							{
								latitude: this.covers[0].latitude,
								longitude: this.covers[0].longitude
							}
						]
					})
				}
			});
		},
		methods: {
			// 当地图加载完成后触发
			lodingmap() {
				this.flag = true
			},
			//点击图标回到自己位置
			loding() {
				if (this.flag) {
					this.mapContext.moveToLocation()
				}
			},
			tokf() {
				uni.makePhoneCall({
					phoneNumber: '114' //仅为示例
				});
			},
			todq() {
				uni.chooseLocation({
					success: res => {
						this.longitude = res.longitude
						this.latitude = res.latitude
					},
					fail: res => {
						console.log(res)
					}
				})
			},
			todz() {
				uni.getLocation({
					type: 'wgs84',
					success: function(res) {
						console.log('当前位置的经度：' + res.longitude);
						console.log('当前位置的纬度：' + res.latitude);
					}
				});
			},
			tobus() {
				uni.scanCode({
					success: res => {
						var scanType = res.scanType;
						var result = res.result;
						console.log('条码类型：' + res.scanType);
						console.log('条码内容：' + res.result);

						// 点击跳转携带坐标参数
						uni.navigateTo({
							url: '../powerbank/powerbank?&result=' + result
						})
					}

				});
			},
			todw() {
				if (this.flag) {
					let plugin = requirePlugin('routePlan');
					// 这里的k自己在腾讯地图api上申请
					let key = this.key; //使用在腾讯位置服务申请的key
					let referer = '定位'; //调用插件的app的名称
					let endPoint = JSON.stringify({ //终点
						'name': this.city,
						'latitude': this.covers[0].latitude,
						'longitude': this.covers[0].longitude
					});
					wx.navigateTo({
						url: 'plugin://routePlan/index?key=' + key + '&referer=' + referer + '&endPoint=' +
							endPoint + '&navigation=' + this.num
						// url: '../shop/shop'
					});
				}
			},
			touser() {
				// 点击跳转携带坐标参数
				uni.navigateTo({
					url: '../user/user'
				})
			}
		}
	}
</script>

<style>
	map {
		width: 698rpx;
		height: calc(100vh - 226rpx);
		display: block;
		box-sizing: border-box;
		left: 27rpx;
		top: 0rpx;
		position: relative;
		border: 20rpx solid blanchedalmond;
		border-radius: 20px;
	}

	.tobus {
		position: fixed;
		left: 13rpx;
		top: 1240rpx;
		width: 725rpx;
		height: 226rpx;
		display: block;
		box-sizing: border-box;
	}

	.tobus_box1 {
		width: 211rpx;
		height: 101rpx;
		display: block;
		box-sizing: border-box;
		background-color: aliceblue;
		left: -258rpx;
		top: 26rpx;
		position: relative;
	}

	.tobus_box2 {
		position: relative;
		left: 242rpx;
		top: -75rpx;
		width: 244rpx;
		height: 101rpx;
		border-radius: 24rpx;
		background-color: aqua;
		display: inline-block;
		box-sizing: border-box;
		box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
	}

	.tobus_box3 {
		position: relative;
		left: 275rpx;
		top: -75rpx;
		width: 209rpx;
		height: 101rpx;
		display: inline-block;
		box-sizing: border-box;
	}

	.uni-mt-5 {
		margin-top: 5px;
	}

	.dz {
		position: absolute;
		right: 20rpx;
		width: 70rpx;
		height: 75rpx;
		bottom: 420rpx;
		left: 327rpx;
		top: -698rpx;
	}

	.dq {
		position: absolute;
		right: 20rpx;
		width: 70rpx;
		height: 70rpx;
		bottom: 420rpx;
		left: 620rpx;
		top: -230rpx;
	}

	.dw {
		transform: translateY(-100%);
		top: -68rpx;
		left: 620rpx;
		position: absolute;
		right: 20rpx;
		width: 70rpx;
		height: 70rpx;
		bottom: 420rpx;
	}

	.kf {
		transform: translateY(-100%);
		top: -253rpx;
		left: 620rpx;
		position: absolute;
		right: 20rpx;
		width: 70rpx;
		height: 70rpx;
		bottom: 420rpx;
	}

	.img-s {
		width: 60rpx;
		height: 60rpx;
		position: relative;
		top: 20rpx;
	}
</style>